<template>
	<div class="auditing">
		<el-breadcrumb class="auP1" separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">考勤</el-breadcrumb-item>
		  <el-breadcrumb-item>审核</el-breadcrumb-item>
		</el-breadcrumb>
		<el-tabs type="border-card">
		  <el-tab-pane label="用户审核">
		  	<el-table
			    :data="tableData2.filter(data =>'未批'==data.situation)"
			    style="width: 100%">
			    <el-table-column label="姓名" prop="name"></el-table-column>
			    <el-table-column label="起始日期" prop="date1"></el-table-column>
			    <!--<el-table-column label="结束日期" prop="date"></el-table-column>-->
			    <el-table-column label="总计/天" prop="day"></el-table-column>
			    <el-table-column label="原因" prop="reason"></el-table-column>
			    <el-table-column align="right">
			      <template slot="header" slot-scope="scope">
			        <!--<el-input
			          v-model="search"
			          size="mini"
			          placeholder="输入关键字搜索"/>-->
			          <p style="text-align: center !important;">审批</p>
			      </template>
			      <template slot-scope="scope">
			      	<el-button type="success" icon="el-icon-check" circle @click="pass(scope.$index, scope.row)"></el-button>
			      	<el-button type="danger" icon="el-icon-circle-close" circle @click="nopass(scope.$index, scope.row)"></el-button>
			      </template>
			    </el-table-column>
			</el-table>
			<div class="block">
			    <!--<span class="demonstration">直接前往</span>-->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page.sync="currentPage3"
			      :page-size="100"
			      layout="prev, pager, next, jumper"
			      :total="1000">
			    </el-pagination>
			</div>
		  </el-tab-pane>
		  
		  <el-tab-pane label="用户记录">
		  	<el-table				  	
			    :data="tableData2.filter(data =>!('未批'==data.situation) && (!search || data.name.toLowerCase().includes(search.toLowerCase())))"
			    style="width: 100%">
			    <el-table-column label="姓名" prop="name"></el-table-column>
			    <el-table-column label="起始日期" prop="date1"></el-table-column>
			    <el-table-column label="结束日期" prop="date2"></el-table-column>
			    <el-table-column label="总计/天" prop="day"></el-table-column>
			    <el-table-column label="状态" prop="situation"></el-table-column>
			    <el-table-column align="right">
			      <template slot="header" slot-scope="scope">
			        <el-input
			          v-model="search"
			          size="mini"
			          placeholder="输入关键字搜索"/>
			      </template>
			      <template slot-scope="scope">				      	
			        <el-button
			          v-show="'放假中'==scope.row.situation"
			          size="mini"
			          @click="handleEdit(scope.$index, scope.row)">销假</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			      </template>
			    </el-table-column>				    
			</el-table>
			  <!--分页开始-->
			  <div class="block">
			    <!--<span class="demonstration">直接前往</span>-->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page.sync="currentPage3"
			      :page-size="100"
			      layout="prev, pager, next, jumper"
			      :total="1000">
			    </el-pagination>
			  </div>
		  </el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
  export default {
    data() {
      return {
        num:0,
        tableData2: [
	        {
	          name: '王小虎',
	          date1: '2019-09-19',
	          date2: '2019-09-25',
	          day: 2,
	          reason: '请假请假请假请假请假请假请假请假请假请假请假请假',
	          situation:'已批'
	        },
	        {
	          name: '王小虎',
	          date1: '2019-05-02',
	          date2: '2019-05-02',
	          day: 2,
	          reason: '请假请假请假请假请假请假请假请假请假请假请假请假',
	          situation:'不批'
	        },
	        {
	          name: '王未批',
	          date1: '2019-05-02',
	          date2: '2019-05-02',
	          day: 2,
	          reason: '请假请假请假请假请假请假请假请假请假请假请假请假',
	          situation:'已批'
	        },
	        {
	          name: '王小虎',
	          date1: '2019-09-19',
	          date2: '2019-09-24',
	          day: 2,
	          reason: '请假请假请假请假请假请假请假请假请假请假请假请假',
	          situation:'已批'
	        }
        ],
        search: '',
        currentPage3: 5
      };
    },
    mounted(){
    	console.log('mounted')
    	var _this = this;
    	console.log(_this)
    	console.log('mounted')
//  	this.tableData2.unshift({
//	      	name:this.$route.params.name,
//	      	date1:this.$route.params.vstart,
//          date2:this.$route.params.vend,
//          day: 2,
//          reason:this.$route.params.reason,
//          situation:this.$route.params.situation
//	     });
		var nowDate = new Date()
        var y = nowDate.getFullYear()
        var m = nowDate.getMonth()+1
        var d = nowDate.getDate()
        var vDate = y+'-'+m+'-'+d
//      
//      var Arr1 = vDate.split("-");
//      console.log(_this.tableData2.date2)
//	    var Arr2 = _this.tableData2.date2.split("-");
//	    var sDate = new Date(Arr1[0], Arr1[1], Arr1[2]);
//	    var eDate = new Date(Arr2[0], Arr2[1], Arr2[2]);
//	    var day = (sDate-eDate)/(24*60*60*1000);
//      //写循环判断
		if('已批'==_this.tableData2.situation && day>0){
			_this.tableData2.situation = '已批'
		}
		else{
			_this.tableData2.situation = '放假中'
		}
		for(var i=0;i<_this.tableData2.length;i++){
			console.log(_this.tableData2[i].name)
			var Arr1 = vDate.split("-");
	        console.log(_this.tableData2[i].date2)
		    var Arr2 = _this.tableData2[i].date2.split("-");
		    var sDate = new Date(Arr1[0], Arr1[1], Arr1[2]);
		    var eDate = new Date(Arr2[0], Arr2[1], Arr2[2]);
		    var day = (sDate-eDate)/(24*60*60*1000);
		    console.log(day)
		    console.log(_this.tableData2[i].situation)
		    if((_this.tableData2[i].situation=='已批') && (day>0))
		    {
				_this.tableData2[i].situation = '已批'
				console.log(_this.tableData2[i].situation)
			}
			else if((_this.tableData2[i].situation=='已批') && (day<0)){
				_this.tableData2[i].situation = '放假中'
				console.log(_this.tableData2[i].situation)
			}
			else{
				_this.tableData2[i].situation = '不批'
			}
		}
    },
    methods: {
       handleEdit(index, row) {
        console.log(index, row.situation);
//      console.log(data.tableData2.situation)
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      pass(index, row){
      	this.$confirm('此操作将批准请假, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已批准!'
          });
		  row.situation = '已批';
		  console.log(row.situation);
		  this.tableData2.splice(index,1);
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '再考虑一下'
          });          
        });      	
      },
      nopass(index, row){
      	this.$confirm('此操作将拒绝批假, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已拒绝'
          });
          row.situation = '不批';
          console.log(row.situation);
		  this.tableData2.splice(index,1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '再考虑一下'
          });          
        });
      }
    }
  };
</script>

<style>
.auditing{
	width: 100%;
}
.auditing .el-table th.is-leaf .cell p{
	text-align: center !important;
}
.auditing .el-table td.is-right,.auditing .el-table th.is-right{
	text-align: center;
}
.auP1{
	font-size: 20px;
	border-bottom: 1px solid grey;
	margin-bottom: 10px;
	padding:10px;
}
.history{
	width: 100%;
}
#box .el-pagination{
	padding: 18px 10px;
}
#box .el-table td.is-right{
	text-align: center;
}
</style>